/* eslint-disable no-unused-vars */
import React from 'react'
import {
  Box,
  Avatar,
  Typography,
  List,
  ListItem,
  ListItemIcon,
  ListItemText,
  Collapse,
  Popover,
  Paper,
  Tooltip,
  Button,
} from '@material-ui/core'
import { makeStyles, withStyles } from '@material-ui/core/styles'
import ExitToAppRoundedIcon from '@material-ui/icons/ExitToAppRounded'
import PermIdentityIcon from '@material-ui/icons/PermIdentity'
import ReorderIcon from '@material-ui/icons/Reorder'
import ImageAspectRatioIcon from '@material-ui/icons/ImageAspectRatio'
import Brightness5Icon from '@material-ui/icons/Brightness5'
import ExpandLess from '@material-ui/icons/ExpandLess'
import ExpandMore from '@material-ui/icons/ExpandMore'
import StarBorder from '@material-ui/icons/StarBorder'

const textColor = '#a3b1cc'

const useStyles = makeStyles((theme) => ({
  user_avatar: {
    width: '100%',
    height: '70px',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: '10px',
  },
  user_avatar_icon: {
    width: theme.spacing(6),
    height: theme.spacing(6),
  },
  logo: {
    backgroundColor: '#367fa9',
    color: '#fff',
    borderBottom: '0 solid transparent',
    transition: 'width 0.3s ease-in-out',
    display: 'block',
    height: '50px',
    fontSize: '20px',
    lineHeight: '50px',
    textAlign: 'center',
    width: '200px',
    padding: '0 15px',
    fontWeight: '300',
    overflow: 'hidden',
    cursor: 'pointer',
  },
  user_panel: {
    display: 'flex',
    alignItems: 'center',
    whiteSpace: 'nowrap',
    position: 'relative',
    width: '100%',
    padding: '15px',
    overflow: 'hidden',
  },
  info: {
    padding: '5px 5px 5px 15px',
  },
  name: {
    color: textColor,
  },
  text: {
    color: textColor,
    display: 'flex',
    alignItems: 'center',
  },
  text_success: {
    borderRadius: '50%',
    backgroundColor: '#1c84c6',
    width: '10px',
    height: '10px',
    display: 'inline-block',
    marginRight: '2px',
    marginTop: '2px',
  },
  text_export: {
    color: 'red',
    marginLeft: '5px',
    width: theme.spacing(2),
    height: theme.spacing(2),
  },
  menu_list_icon: {
    width: theme.spacing(2),
    height: theme.spacing(2),
  },
  nested: {
    paddingLeft: theme.spacing(4),
  },
  item_action: {
    backgroundColor: '#1890ff',
    '& .MuiListItemIcon-root, & .MuiListItemText-primary, & .MuiSvgIcon-root': {
      color: '#fff !important',
      minWidth: '36px',
    },
  },
}))

const NewListItem = withStyles((theme) => ({
  root: {
    '&:hover': {
      backgroundColor: '#1a237e',
    },
    '& .MuiListItemIcon-root, & .MuiListItemText-primary, & .MuiSvgIcon-root': {
      color: textColor,
      minWidth: '26px',
      fontSize: '14px',
    },
    '& .MuiListItemText-primary': {
      marginLeft: '10px',
    },
  },
}))((props) => <ListItem {...props} />)

const Index = ({ collapsed }) => {
  const classes = useStyles()
  /**
   * @dep 菜单列表
   */
  const menuList = [
    {
      id: '1',
      name: '用户管理',
      icon: () => <PermIdentityIcon className={classes.menu_list_icon} />,
      children: false,
    },
    {
      id: 2,
      name: '角色管理',
      icon: () => <ImageAspectRatioIcon className={classes.menu_list_icon} />,
      children: false,
    },
    {
      id: 3,
      name: '菜单管理',
      icon: () => <ImageAspectRatioIcon className={classes.menu_list_icon} />,
      children: false,
    },
    {
      id: 4,
      name: '部门管理',
      icon: () => <ImageAspectRatioIcon className={classes.menu_list_icon} />,
      children: false,
    },
    {
      id: 5,
      name: '岗位管理',
      icon: () => <ImageAspectRatioIcon className={classes.menu_list_icon} />,
      children: false,
    },
    {
      id: 6,
      name: '字典管理',
      icon: () => <ImageAspectRatioIcon className={classes.menu_list_icon} />,
      children: false,
    },
    {
      id: 7,
      name: '参数设置',
      icon: () => <ImageAspectRatioIcon className={classes.menu_list_icon} />,
      children: false,
    },
    {
      id: 8,
      name: '通知公告',
      icon: () => <ImageAspectRatioIcon className={classes.menu_list_icon} />,
      children: false,
    },
    {
      id: 9,
      name: '日志管理',
      icon: () => <ReorderIcon className={classes.menu_list_icon} />,
      children: [
        {
          id: '9-1',
          name: '日志管理',
          icon: () => <Brightness5Icon className={classes.menu_list_icon} />,
        },
        {
          id: '9-2',
          name: '登录日志',
          icon: () => <Brightness5Icon className={classes.menu_list_icon} />,
        },
      ],
    },
  ]
  const handleListClick = () => {}
  const [open, setOpen] = React.useState(true)

  const handleClick = () => {
    setOpen(!open)
  }

  const [anchorEl, setAnchorEl] = React.useState(null)

  const onAnchorClick = (event) => {
    setAnchorEl(event.currentTarget)
  }

  const onClose = () => {
    setAnchorEl(null)
  }

  const openEl = Boolean(anchorEl)
  const id = openEl ? 'simple-popover' : undefined

  return (
    <>
      {collapsed ? (
        <>
          <Box className={classes.user_avatar}>
            <Avatar className={classes.user_avatar_icon} src='http://demo.ruoyi.vip/img/profile.jpg' icon='user' />
          </Box>
          <List component='nav' aria-labelledby='nested-list-subheader' className={classes.root}>
            {menuList.map((v) => {
              if (v?.children) {
                return (
                  <Box key={v.id}>
                    <NewListItem style={{ height: '45px' }} button onClick={onAnchorClick} onMouseMove={onAnchorClick}>
                      <ListItemIcon>{<v.icon />}</ListItemIcon>
                    </NewListItem>
                    <Popover
                      id={id}
                      open={openEl}
                      anchorEl={anchorEl}
                      onClose={onClose}
                      anchorOrigin={{
                        vertical: 'top',
                        horizontal: 'right',
                      }}
                      transformOrigin={{
                        vertical: 'top',
                        horizontal: 'left',
                      }}
                    >
                      <Paper style={{ backgroundColor: '#001529' }}>
                        <List component='div' disablePadding>
                          {v.children.map((v) => (
                            <NewListItem key={v.id} button disableRipple>
                              <ListItemIcon>{<v.icon />}</ListItemIcon>
                              <ListItemText primary={v.name} />
                            </NewListItem>
                          ))}
                        </List>
                      </Paper>
                    </Popover>
                  </Box>
                )
              } else {
                return (
                  <NewListItem
                    key={v.id}
                    className={v.id === '1' ? classes.item_action : null}
                    style={{ height: '45px' }}
                    button
                    disableRipple
                  >
                    <Tooltip title={v.name} disableFocusListener arrow placement='right'>
                      <ListItemIcon>{<v.icon />}</ListItemIcon>
                    </Tooltip>
                  </NewListItem>
                )
              }
            })}
          </List>
        </>
      ) : (
        <>
          <Box className={classes.logo}>RuoYi</Box>
          <Box className={classes.user_panel}>
            <Avatar className={classes.user_avatar_icon} src='http://demo.ruoyi.vip/img/profile.jpg' icon='user' />
            <Box className={classes.info}>
              <Typography variant='button' display='block' className={classes.name}>
                daniel
              </Typography>
              <Typography variant='button' className={classes.text}>
                <Box component='span' className={classes.text_success} /> 在线{' '}
                <ExitToAppRoundedIcon className={classes.text_export} /> 注销
              </Typography>
            </Box>
          </Box>
          <List component='nav' aria-labelledby='nested-list-subheader' className={classes.root}>
            {menuList.map((v) => {
              if (v?.children) {
                return (
                  <Box key={v.id}>
                    <NewListItem button onClick={handleClick}>
                      <ListItemIcon>{<v.icon />}</ListItemIcon>
                      <ListItemText primary={v.name} />
                      {open ? <ExpandLess /> : <ExpandMore />}
                    </NewListItem>
                    <Collapse key={v.id + 'coll'} in={open} timeout='auto' unmountOnExit>
                      <List component='div' disablePadding>
                        {v.children.map((v) => (
                          <NewListItem key={v.id} button disableRipple className={classes.nested}>
                            <ListItemIcon>{<v.icon />}</ListItemIcon>
                            <ListItemText primary={v.name} />
                          </NewListItem>
                        ))}
                      </List>
                    </Collapse>
                  </Box>
                )
              } else {
                return (
                  <NewListItem className={v.id === '1' ? classes.item_action : null} key={v.id} button disableRipple>
                    <ListItemIcon>{<v.icon />}</ListItemIcon>
                    <ListItemText primary={v.name} />
                  </NewListItem>
                )
              }
            })}
          </List>
        </>
      )}
    </>
  )
}

export default Index
